<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1" >
        <style>
        body{
          margin: 0;
          padding: 0;
        }
        .component{
          width: 50%;height: 50px;
          margin-bottom: 20px;
          background-color: #eee;
          display: none;
        }


          </style>

    </head>
    <body>
    <div id="h5">
      <div id="page-1" class="page section"><div class="component log">log</div>
<div class="component slogan">slogan</div>
      </div>
      <div id="page-2" class="page section"><div class="component desc">desc</div></div>
      <div id="page-3" class="page section"><div class="component bar">bar</div></div>
    </div>
    <script type="text/javascript" src="../js/lib/jquery.js"></script>
    <script type="text/javascript" src="../js/lib/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../js/lib/jquery.fullPage.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#h5').fullpage({
          'sectionsColor':['#254875','#00FF00','#254587','#695684'],
          onLeave:function(index,nextIndex,direction){/*debugger*/
            $('#h5').find('.page').eq(index-1).trigger('onLeave');
          },
          /*afterLoad:function(index,nextIndex,direction){debugger
            $('#h5').find('.page').eq(index-1).trigger('onLoad');
          }*/
          afterLoad:function(anchorLink,index){
            $('#h5').find('.page').eq(index-1).trigger('onLoad');
            /*$('#h5').find('.component').eq(index-1).trigger('onLoad');*/
          }
        });

        $('.page').on('onLeave',function(){
          console.log($(this).attr('id'),'==>>','onLeave')
          $(this).find('.component').trigger('onLeave');
          /*$(this).find('.component').triggerHandler('onLeave');*/
        })
        $('.page').on('onLoad',function(){
          console.log($(this).attr('id'),'==>>','onLoad')
          $(this).find('.component').trigger('onLoad');
        })
        $('.component').on('onLoad',function(){

          $(this).fadeIn();
          return false;
        })
        $('.component').on('onLeave',function(){

          $(this).fadeOut();
          return false;
        })
      })
    </script>
    </body>
</html>